<template>
  <div>
    <el-button type="success" border @click="AddRouter">添加用户</el-button>
    <br>
    <br>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="" type="index" label="编号" width="80px" align="center" />
      <el-table-column prop="userName" label="用户名" align="center" />
      <el-table-column prop="roleName" label="角色名称" align="center" />
      <el-table-column prop="sex" label="性别" align="center">
        <template v-slot="scoped">
          <span v-if="scoped.row.sex == false">{{ "男" }}</span>
          <span v-else>{{ "女" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="provinceId" label="所在省份" align="center">
        <template #default="{ row }">
          {{ getLabelByValue1(row.provinceId) }}
        </template>
      </el-table-column>
      <el-table-column prop="cityId" label="所在市" align="center">
        <template #="{ row }">
          {{ getLabelByValue2(row.cityId) }}
        </template>
      </el-table-column>
      <el-table-column prop="countyId" label="所在县" align="center">
        <template v-slot="scoped">
          {{ getLabelByValue3(scoped.row.countyId) }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="hamletName" label="详细地址" align="center" show-overflow-tooltip>
        <template v-slot="scoped">
          {{ formatAddress(scoped.row.hamletName) }}
        </template>
      </el-table-column> -->
      <el-table-column prop="hamletName" label="详细地址" width="120">
        <template v-slot="scope">
          <el-tooltip :content="scope.row.hamletName" placement="top">
            <span>{{ truncateAddress(scope.row.hamletName) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="createName" label="创建人" align="center" />
      <el-table-column prop="createTime" label="创建日期" align="center" width="230px">
        <template v-slot="scoped">
          {{ moment(scoped.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="updateName" label="修改人" align="center" />
      <el-table-column prop="updateTime" label="修改日期" align="center" width="230px">
        <template v-slot="scoped">
          <span v-if="!scoped.row.updateTime"></span>
          <span v-else>{{ moment(scoped.row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" fixed="right" label="操作" width="140" align="center">
        <template v-slot="scoped">
          <el-link type="warning" style="margin: 0 3px;" @click="UpDateRouter(scoped.row.userId)">修改</el-link>
          <el-link type="danger" style="margin: 0 3px;" @click="Del(scoped.row.userId)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- {{ tableData }} -->
  </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { regionData } from "element-china-area-data";//引入
import { useCounterStore } from '@/stores/counter';

console.log(regionData)
//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();
//添加条转
const AddRouter = () => {
  router.push("/UserCreateView")
}

//详细地址超过5个字符转换***字符
// 格式化地址的方法
const formatAddress = (address: string) => {
  if (address.length > 5) {
    return address.slice(0, 5) + '***';
  }
  return address;
}

// 截取地址函数
const truncateAddress = (address: string) => {
  if (address.length > 5) {
    // return address.substring(0, 5) + '*'.repeat(address.length - 5);
    return address.substring(0, 4) + '****';
  }
  return address;
};

//修改跳转console
const UpDateRouter = (ids: any) => {
  // console.log(ids)
  store.ccstore.UpdateUserId = ids
  router.push({
    name: 'UpdateUserView',
    query: ids
  });
}

//显示  
const tableData = ref([])
const show = () => {
  axios.get('https://localhost:7174/api/Message/GetUser', {}).then(res => {
    tableData.value = res.data.data
    // console.log(res)
  })
  // console.log(tableData)
}

//#region 省市县显示
//储存读信息
const datas: any = reactive({
  label1: {},
  label2: {},
  label3: {}
})

// 根据 value 查找对应的 label省
const getLabelByValue1 = (value: any) => {
  datas.label1 = regionData.find(item => item.value == value);
  // console.log(datas.label1.children, "datas.label1")
  return datas.label1 ? datas.label1.label : '--';
};

// 根据 value 查找对应的 label市
const getLabelByValue2 = (value: any) => {
  // console.log(value, 'Value1')
  datas.label2 = datas.label1.children.find((item: any) => item.value == value);
  console.log(datas.label2, "ok")
  return datas.label2 ? datas.label2.label : '--';
};

// 根据 value 查找对应的 label县
const getLabelByValue3 = (value: any) => {
  // console.log(value, 'Value1')
  datas.label3 = datas.label2.children.find((item: any) => item.value == value);
  console.log(datas.label3, "ok")
  return datas.label3 ? datas.label3.label : '--';
};
//#endregion

//删除
const Del = (ids: any) => {
  ElMessageBox.confirm(
    '你确定删除吗?',
    '提示',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post("https://localhost:7272/api/Message/DelUser", {
        "userId": ids
      }).then(res => {
        if (res.data.code == 204) {
          ElMessage.success(res.data.msg);
        }
        show();
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}


onMounted(() => {
  show();
})

</script>

<style scoped></style>